<template>
	<view class="app">
		<view class="price-box" v-if="payType != 7">
			<text>支付金额</text>
			<text class="price">{{ money }}</text>
		</view>
		<view class="price-box" v-else>
			<text>支付贡献值</text>
			<text class="price">{{ pay_mdl }}</text>
		</view>

		<view class="pay-type-list">


			<view class="type-item b-b" @tap="changePayType(1)" v-if="parseInt(payTypeList.order_wechat_pay, 10) === 1 ">
				<image class="pay-img" src="/static/mdl-img/weixinpay.png"></image>
				<view class="con">
					<text class="tit">微信支付</text>
					<text>推荐使用微信支付</text>
				</view>
				<label class="radio">
					<radio value="" color="#FC9F56" :checked='payType == 1' />
				</label>
			</view>
			<view class="type-item b-b" @tap="changePayType(2)">
				<image class="pay-img" src="/static/mdl-img/alipay.png"></image>
				<view class="con">
					<text class="tit">支付宝支付</text>
				</view>
				<label class="radio">
					<radio value="" color="#FC9F56" :checked='payType == 2' />
				</label>
			</view>
			<view class="type-item b-b" @tap="changePayType(7)">
				<image class="pay-img" src="/static/mdl-img/mdlpay.png"></image>
				<view class="con">
					<text class="tit">贡献值支付</text>
					<text>贡献值 {{ user_integral }}</text>
				</view>
				<label class="radio">
					<radio value="" color="#FC9F56" :checked='payType == 7' />
				</label>
			</view>
			<view class="type-item" @tap="changePayType(5)" v-show="parseInt(payTypeList.order_balance_pay, 10) === 1">
				<image class="pay-img" src="/static/mdl-img/overage.png"></image>
				<view class="con">
					<text class="tit">余额支付</text>
					<text>可用余额 {{ userInfo && userInfo.account && userInfo.account.user_money }}</text>
				</view>
				<label class="radio">
					<radio value="" color="#FC9F56" :checked='payType === 5' />
				</label>
			</view>
		</view>

		<text class="mix-btn" @tap="confirm">确认支付</text>
		<view v-html="html" class="form" v-if="form"></view>
	</view>
</template>

<script>
	import {
		orderPay,
		orderAlipay,
		rsaSign
	} from "@/api/product";
	import {
		memberInfo,
		orderDetail
	} from "@/api/userInfo";
	import {
		configList
	} from "@/api/basic";

	export default {
		data() {
			return {
				htm: '',
				payType: 5,
				payTypeList: {},
				money: 0,
				userInfo: {},
				orderDetail: {},
				orderInfo: {},
				formData: {},
				form: false,
				location: '',
				user_integral: '',
				pay_mdl: 0,
				Wechat: false,
				noWechat: false,
				vip:"0"
			};
		},
		computed: {

		},
		onLoad(options) {
			if(options.vip){
				this.vip=1
			}
			this.initData(options);
			this.Wechat = this.isWechat();
			this.user_integral = uni.getStorageSync('user_integral');

		},
		methods: {
			/**
			 *@des 数据初始化
			 *@author stav stavyan@qq.com
			 *@blog https://stavtop.club
			 *@date 2019/12/10 11:45:36
			 *@param arguments
			 */
			initData(options) {
				console.log(this.noWechat)
				// #ifdef APP-PLUS
				this.noWechat = true;
				console.log(this.noWechat)
				// #endif
				this.orderInfo.out_trade_no = options.out_trade_no;
				this.getPayTypeList();
				this.getOrderDetail(options.out_trade_no);
				this.userInfo = uni.getStorageSync('userInfo') || undefined;
			},
			encodeURL(encodeString) {
				if (!(encodeString == null || encodeString == undefined || encodeString == "")) {
					return encodeURIComponent(encodeString);
				}
			},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			/**
			 *@des 获取订单费用
			 *@author stav stavyan@qq.com
			 *@blog https://stavtop.club
			 *@date 2019/12/10 11:47:30
			 *@param id 订单id
			 */
			async getOrderDetail(out_trade_no) {
				await this.$get(`${orderDetail}`, {
					out_trade_no,
					simplify: 1
				}).then(r => {
					for (let i = 0; i < r.data.length; i++) {
						this.money += +r.data[i].order_money;
						this.pay_mdl += +r.data[i].pay_mdl;
					}
				}).catch(err => {
					console.log(err)
				});
			},
			/**
			 *@des 获取支付类型列表
			 *@author stav stavyan@qq.com
			 *@blog https://stavtop.club
			 *@date 2019/12/12 17:40:00
			 */
			async getPayTypeList() {
				await this.$get(`${configList}`, {
					field: 'order_balance_pay,order_wechat_pay,order_ali_pay'
				}).then(r => {
					this.payTypeList = r.data
				}).catch(err => {
					console.log(err)
				});
			},
			//确认支付
			async confirm() {
				// if (this.payType !== 5) {
				// this.$api.msg('暂时只提供余额支付~');
				// 	return
				// }
				const params = {};

				params.data = JSON.stringify(this.orderInfo);
				params.order_group = 'order';
				params.pay_type = this.payType;
				if (this.payType == 1) {
					// #ifdef H5
					if (this.isWechat()) {
						params.trade_type = 'js';
					} else {
						params.trade_type = 'mweb';
					}
					// #endif

					// #ifdef MP
					params.trade_type = 'mini_program';
					// #endif

					// #ifdef APP-PLUS
					params.trade_type = 'app';
					// #endif

				} else if (this.payType == 5) {
					params.trade_type = 'default';
				} else if (this.payType == 2) {

					// #ifdef H5
					params.trade_type = 'wap';
					// #endif
					// #ifdef APP-PLUS
					params.trade_type = 'app';
					// #endif
				} else if (this.payType == 7) {
					// #ifdef H5
					if (this.isWechat()) {
						params.trade_type = 'mweb';
					} else {
						params.trade_type = 'mweb';
					}
					// #endif
					// #ifdef APP-PLUS
					params.trade_type = 'app';
					// #endif
				}

				// return;
				let data = {
					data: JSON.stringify(this.orderInfo),
					order_group: 'order',
					trade_type: params.trade_type,
					pay_type: this.payType
				}
				// #ifdef H5

				if (this.isWechat) {
					if (uni.getStorageSync('weixin_openid')) {
						data.openid = uni.getStorageSync('weixin_openid')
					}
				}
				// #endif

				console.log(data)
				await this.$post(`${orderPay}`, data).then(async r => {
					console.log(r)
					// #ifdef H5
					if (this.payType == 2) {
						this.form = true;
						this.html = r.data.config;
						setTimeout(function() {
							document.forms['alipaysubmit'].submit();
						}, 500);
					} else if (this.payType == 1 && data.trade_type == 'js') {
						let that = this;

						function onBridgeReady() {
							WeixinJSBridge.invoke(
								'getBrandWCPayRequest', {
									"appId": r.data.config.appId, //公众号名称，由商户传入
									'timeStamp': r.data.config.timeStamp,
									'nonceStr': r.data.config.nonceStr,
									'package': r.data.config.package,
									'signType': r.data.config.signType,
									'paySign': r.data.config.paySign,
								},
								function(res) {
									if (res.err_msg == "get_brand_wcpay_request:ok") {
										uni.redirectTo({
											url: '/pages/user/money/success'
										});
									} else {
										alert('订单支付失败')
									}
								});
						}
						if (typeof WeixinJSBridge == "undefined") {
							if (document.addEventListener) {
								document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
							} else if (document.attachEvent) {
								document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
								document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
							}
						} else {
							onBridgeReady();
						}

					} else if (this.payType == 1 && data.trade_type == 'mweb') {
						window.location = r.data.config.mweb_url;
						plus.runtime.openURL(r.data.config.mweb_url)
						window.open(r.data.config.mweb_url)
					} else if (this.payType == 7 && data.trade_type == 'mweb') {
						console.log(r.data)

						uni.redirectTo({
							url: '/pages/user/money/success'
						});
					} else {
						uni.redirectTo({
							url: '/pages/user/money/success'
						});
					}
					// #endif

					// #ifdef APP-PLUS
					if (this.payType == 2) {
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: r.data.config, //支付宝订单数据
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.redirectTo({
									url: '/pages/user/money/success'
								});
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					} else if (this.payType == 1) {
						console.log(r.data.config)
						uni.requestPayment({
							provider: 'wxpay',

							orderInfo: JSON.stringify({
								appid: r.data.config.appid,
								noncestr: r.data.config.noncestr,
								package: r.data.config.package,
								partnerid: r.data.config.partnerid,
								prepayid: r.data.config.prepayid,
								timestamp: r.data.config.timestamp,
								sign: r.data.config.sign,
							}),
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.redirectTo({
									url: '/pages/user/money/success'
								});
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});

					} else {
						uni.redirectTo({
							url: '/pages/user/money/success'
						});
					}
					// #endif


				}).catch(err => {
					console.log(err)
				})
			},
			isWechat() {
				const ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
		}
	}
</script>

<style lang='scss'>
	page {
		background-color: $page-color-white;
	}

	.app {
		width: 100%;
	}

	.price-box {
		background-color: #fff;
		height: 265upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #909399;

		.price {
			font-size: 50upx;
			color: #303133;
			margin-top: 12upx;

			&:before {
				content: '￥';
				font-size: 40upx;
			}
		}
	}

	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		padding-left: 60upx;

		.type-item {
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.iconerjiye-yucunkuan {
			color: #fe8e2e;
		}

		.iconweixinzhifu {
			color: #36cb59;
		}

		.iconalipay {
			color: #01aaef;
		}

		.tit {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: #FCA056;
		}
	}

	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

	.pay-img {
		width: 68upx;
		height: 68upx;
		margin-right: 30upx;
	}
</style>
